<!-- 定义模版对象 -->
<template>
  <div class="login_container">
    <div class="login_box">
      <h3 class="title">趣办公</h3>
      <el-form ref="loginFormRef" label-width="0" class="login_form" :model="loginForm" :rules="rules">
        <el-form-item prop="empId">
          <el-input prefix-icon="iconfont iconuser" v-model="loginForm.empId" clearable
                    placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item prop="empPassword">
          <el-input prefix-icon="iconfont iconsuo" type="password" v-model="loginForm.empPassword" show-password
                    clearable placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item prop="position" style="text-align: center">
          <el-radio-group v-model="loginForm.position">
            <el-radio label="用户" border value="user"></el-radio>
            <el-radio label="管理员" border value="admin"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="loginForm.checked">记住密码</el-checkbox>
        </el-form-item>
        <el-form-item class="btn">
          <el-button type="primary" @click="login" style="width: 350px">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<!-- 定义JS变量 -->
<script>
export default {
  data() {
    return {
      loginForm: {
        empId: '',
        empPassword: '',
        checked: true,
        position: '',
      },
      position: [{
        name: 'user',
        value: '用户'
      }, {
        name: 'admin',
        value: '管理员'
      }
      ],
      empName: '',
      // 定义表单的验证规则
      rules: {
        // 定义校验用户名
        empId: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur'}
        ],
        // 定义校验密码
        empPassword: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur'}
        ],
        position: [
          {required: true, message: '请选择身份', trigger: 'change'}
        ],
      }
    }
  },
  mounted() {
    this.assignment()
  },
  methods: {
    assignment() {
      if (this.$cookies.get('status')) {
        this.loginForm.checked = this.$cookies.get('status')
        this.loginForm.empId = this.$cookies.get('empId')
        this.loginForm.empPassword = this.$cookies.get('empPassword')
      }
    },
    login() {
      // valid 表示校验的结果 true表示通过  false表示失败
      this.$refs.loginFormRef.validate(async valid => {
        // 如果没有完成校验则直接返回
        if (!valid) return
        if (this.loginForm.position === "用户") {
          const emp = {}
          emp.empId = this.loginForm.empId
          emp.empPassword = this.loginForm.empPassword

          const {data: result} = await this.$http.post('/user/login', emp)
          if (result.status !== 200) return this.$message.error(result.data)
          this.$cookies.set('empId', result.data.empId)
          this.$cookies.set('empPassword', this.loginForm.empPassword)
          this.$cookies.set('status', this.loginForm.checked)
          this.$cookies.set('username', result.data.empName)
          this.$cookies.set('position', this.loginForm.position)
          this.$cookies.set('empPhoto', result.data.empPhoto)
          window.sessionStorage.setItem('userToken', result.data.empPassword)
          this.$message.success('用户登陆成功')
          await this.$router.push('/user')
        } else if (this.loginForm.position === "管理员") {
          const admin = {}
          admin.adminUsername = this.loginForm.empId
          admin.adminPassword = this.loginForm.empPassword
          const {data: res} = await this.$http.post('/admin/login', admin)
          if (res.status !== 200) {
            return this.$message.error("用户名或密码错误")
          } else {
            window.sessionStorage.setItem('adminToken', res.data.adminPassword)
            this.$cookies.set('username', res.data.adminUsername)
            await this.$router.push("/admin")
            return this.$message.info("登陆成功")
          }
        } else {
          this.$message.error("请选择登陆身份")
        }
      })
    }
  }
}
</script>

<!-- 防止组件冲突 -->
<style lang="less" scoped>
.title {
  margin: 20px auto 0;
  text-align: center;
  color: #707070;
}

.login_container {
  background-color: #2b4b6b;
  height: 100%;
}

.login_box {
  width: 450px;
  height: 380px;
  background-color: #FFFFFF;
  /* 设定圆弧角*/
  border-radius: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  .avatar_box {
    height: 120px;
    width: 130px;
    border: 1px solid #EEEEEE;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 0 10px #DDDDDD; /* 添加阴影*/
    position: absolute; /* 绝对定位*/
    left: 50%; /* 距离左侧50%*/
    transform: translate(-50%, -50%); /*回调50%*/
    background-color: #FFFFFF;

    img {
      height: 100%;
      width: 100%;
      border-radius: 50%;
      background-color: #EEEEEE;
    }
  }

  .btn {
    text-align: center;
  }

  .login_form {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }
}
</style>
